import React, { memo, useState, useEffect } from "react"
import { useSelector,useDispatch } from 'react-redux'
import "./index.less"
import classNames from "classnames"
import ChildCard from "./components/child-card"
import likeIcon from "../assets/like.png"
import { addFoots, deleteFoots } from "../store/modules/foods"
import axios from "axios"
{
  /* 组件通信还可以用解构 export default memo(({width=100，size=50，menuList}) => { 
    可以给默认值
*/
}
export default memo((props) => {
  const {footData,price} = useSelector(state => state.rootReducer.shoppingCartStore)
  const dispatch = useDispatch()
  const [currentId, setCurrentId] = useState(1)
  const [currentSelcet, setCurrentSelcet] = useState(props.menuList[0])
  const [editInpte,setEditInput] = useState(false)
  const [editPrice,setEditPrice] = useState(price)

  // 列表切换
  const menuListHandleClick = (id, name, price) => {
    setCurrentId(id)
    setCurrentSelcet({
      ...currentSelcet,
      id,
      name,
      price,
    })
    props.onSelectMenuItem(id)
  }

  // 收藏
  const likeHandle = (id, like) => {
    props.onlikeHandle(id, like)
  }

  // 添加购物车
  const addToCartHandle = () => {
    dispatch(addFoots(currentSelcet))
  }

  // 删除购物车
  const delShoppingCartHandle = (e)=>{
    dispatch(deleteFoots({id:e.id,price:e.price}))
  }

  // 修改商品价格
  const editPriceHandle = async ()=>{
    props.editPriceHandle({currentId,editPrice})
    setEditInput(false)
  }

  const onChange = (e)=>{
    setEditPrice(e.target.value)
  }

  useEffect(() => {
    console.log(`进入${currentSelcet.name}详情页`)
    setCurrentSelcet(props.menuList[currentId - 1])
    return () => {
      console.log(`退出${currentSelcet.name}详情页`)
    }
  }, [currentSelcet.name, props.menuList])
  return (
    <div className="menu">
      <ul className="list">
        {props.menuList.map((item) => {
          return (
            <li
              // 这里使用classNames库 需要pnpm add classnames ，通过import className from 'classnames' 来使用
              className={classNames(
                "list_item",
                currentId === item.id ? "list_item_active" : "list_item_default"
              )}
              key={item.id}
              onClick={() =>
                menuListHandleClick(item.id, item.name, item.price)
              }
            >
              {item.id === 1 && <div className="ico"></div>}
              {item.like && <img className="like_icon" src={likeIcon} />}
              {item.name}
              <button
                className="like"
                onClick={(e) => {
                  e.stopPropagation(), likeHandle(item.id, item.like)
                }}
              >
                {item.like ? "取消收藏" : "收藏"}
              </button>
            </li>
          )
        })}
      </ul>
      <div className="card">
        <div className="room">
          <div className="detail">
            这里是<span className="text">{currentSelcet.name}</span>详情
          </div>
          <div className="price">
            价格：<span className="price_text">{currentSelcet.price}元</span>
            <button className="addBtn" onClick={addToCartHandle}>
              加入购物车
            </button>
            <button onClick={()=>setEditInput(true)} >修改价格</button>
            {
              editInpte && <div className="edit">
              <input type="text" placeholder={currentSelcet.price} onChange={onChange} />
              <button onClick={editPriceHandle}>确认</button>
              <button onClick={()=>setEditInput(false)}>取消修改</button>
            </div>
            }
          </div>
        </div>
        <div className="shopping_cart">
          <div className="product">选择的商品{
            <div className="list">
              {
                footData.map(item=>{
                  return  <div className="item" key={item.id}>
                      <div className="item name">{item.name}、</div>
                      <button onClick={()=>delShoppingCartHandle(item)}>删除</button>
                  </div>
                 })
              }
            </div>
          }</div>
          <div className="total_price">总价<span className="text">{price}元</span></div>
        </div>
      </div>
      <ChildCard />
    </div>
  )
})
